<template>
	<view class="common-input-wrapper">
		<slot name="prefix" class="icon"></slot>			
		<input class="content" v-bind="$attrs" :value="props.modelValue" @input="changeValue"/>
		<slot name="suffix" class="icon"></slot>			
	</view>
</template>

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const changeValue = ({ detail })=>{
	emit('update:modelValue', detail.value)
}
</script>

<style lang="scss" scoped>
.common-input-wrapper{
	color: #1F2937;
	padding: 20rpx 30rpx;
	font-size: 32rpx;
	line-height: 1.2;
	height: 90rpx;
	width: 620rpx;
	border-radius: 12rpx;
    box-sizing: border-box;
	display: flex;
	align-items: center;
	margin: 0 auto;
	column-gap: 6rpx;
	text-align: left !important;
	border: 2rpx solid #E5E7EB;
    background: #FFFFFF;
	.content{
		flex: 1;
	}
	.icon{
		width: 30rpx;
	}
}
</style>